<template>
  <div class="tabComponent">
    <button
      v-for="tab in tabs"
      :key="tab.title"
      :class="['tab-button']"
      @click="changeTab(tab)"
    >
      {{ tab.displayName }}
    </button>

    <keep-alive>
      <component
        :is="currentTab.tabComp"
        :content="content"
        class="tab"
      ></component>
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import BookIntroduction from './BookIntroduction.vue'
import BookCommentList from './BookCommentList.vue'
import BooksQA from './BooksQA.vue'
import { reactive, markRaw } from 'vue'
defineProps<{
  content: string
}>()
const tabs = reactive([
  {
    title: 'Introduction',
    displayName: '图书介绍',
    tabComp: markRaw(BookIntroduction),
  },
  {
    title: 'CommentList',
    displayName: '图书评价',
    tabComp: markRaw(BookCommentList),
  },
  { title: 'QA', displayName: '图书问答', tabComp: markRaw(BooksQA) },
])
const currentTab = reactive({
  tabComp: tabs[0].tabComp,
})
const changeTab = (tab: any) => {
  currentTab.tabComp = tab.tabComp
}
</script>

<style scoped>
.tabComponent {
  float: left;
  width: 100%;
  text-align: left;
  margin-left: 80px;
}
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: solid 1px #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #cdcdcd;
}
.tab {
  border: solid 1px #ccc;
  padding: 10px;
}
</style>
